<template>
	<view class="container">
		<view class="header">选择车辆</view>
		<view class="message-list">
			<radio-group @change="handleRadioChange">
				<view class="car-item" v-for="(item, index) in carList" :key="index">
					<view class="car-info">
						<image class="car-image" src="/static/whb/youhui1.jpg"></image>
						<view class="car-details">
							<text class="car-model">车型：奔驰-GR</text>
							<text class="car-number">车牌：鲁M35468</text>
						</view>
					</view>
					<radio :value="index.toString()" :checked="item.selected" color="#007AFF" />
				</view>
			</radio-group>
		</view>
		<view class="add-car-container">
			<button class="add-car-btn">
				<text class="add-icon">+</text>
				<text>添加车辆</text>
			</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const carList = ref([
	{ model: '奔驰-GR', number: '鲁M35468', selected: true },
	{ model: '奔驰-GR', number: '鲁M35468', selected: false }
]);

const handleRadioChange = (e) => {
	const selectedIndex = parseInt(e.detail.value);
	carList.value.forEach((car, index) => {
		car.selected = index === selectedIndex;
	});
};
</script>

<style>
.container {
		height: 200px;
		background-color: #007AFF;
	}

.header {
	text-align: center;
	color: white;
	padding-top: 10px;
	font-size: 20px;
}

.message-list {
	background-color: white;
	margin: 30rpx;
	border-radius: 20rpx;
	padding: 20rpx;
}

.car-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 20rpx;
	border-bottom: 1px solid #eee;
}

.car-info {
	display: flex;
	align-items: center;
	flex: 1;
}

.car-image {
	width: 100rpx;
	height: 100rpx;
	border-radius: 10rpx;
	margin-right: 20rpx;
}

.car-details {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}

.car-model, .car-number {
	font-size: 28rpx;
	color: #333;
}

.add-car-container {
	position: fixed;
	bottom: 40rpx;
	left: 0;
	right: 0;
	padding: 0 30rpx;
}

.add-car-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #007AFF;
	color: white;
	height: 80rpx;
	border-radius: 40rpx;
	font-size: 32rpx;
	border: none;
}

.add-icon {
	font-size: 40rpx;
	margin-right: 10rpx;
}
</style>
